<template>
	<view>
		<view>
			<view class="line1">
				<view class="label">文章标题</view>
				<view class="value">
					<input 
						placeholder="请输入文章标题"
						v-model="article.title"
						placeholder-class="placeholder_class"/>
				</view>
			</view>
			<view class="line1">
				<view class="label">文章链接</view>
				<view class="value">
					<input 
						placeholder="请填写文章链接"
						v-model="article.url"
						placeholder-class="placeholder_class"/>
				</view>
			</view>
			<view class="line1">
				<view class="label" @click="show_popup">（点击查看文章）</view>
				<view class="value"></view>
			</view>
			<view class="save_btn" @click="save_article()">保存</view>
			
			<u-popup v-model="show_popup_status" mode="center" :border-radius="50">
				<view class="value2">
					<view class="popup_label">文章内容</view>
					<iframe :src="article.url"></iframe>
					<view class="close_btn" @click="close_popup">关闭</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import { get_article,save_article } from '@/util/api/api.js';
	
	export default {
		data() {
			return {
				webviewStyles:{
					width:'690rpx',
					height:'1000rpx'
				},
				article:{
					id:null,
					title:'',
					url:''
				},
				show_popup_status:false
			}
		},
		onLoad({id}) {
			console.log(id)
			if(id){
				this.get_article(id)
			}
		},
		methods: {
			async get_article(id){
				
				let res = await get_article({id})
				this.article = res.data
			},
			show_popup(){
				this.show_popup_status = true
			},
			close_popup(){
				this.show_popup_status = false
			},
			async save_article(){
				let parms = {
					title:this.article.title,
					url:this.article.url
				}
				let res = await save_article(parms)
				
				if (res.code==1) {
					uni.redirectTo({
						url:'/pages/article/list'
					})
				}
			}
		}
	}
</script>

<style>
.line1{
	padding: 30rpx;
}
.label{
	height: 30;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #666666;
	line-height: 30rpx;
}

.value input{
	width: 100%;
	height: 77rpx;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	line-height: 77rpx;
	border-bottom: 2rpx solid #f5f5f5;
}

.value2{
	width: 690rpx;
	height: 700rpx;
	margin: 60rpx auto;
}

.value2 iframe{
	width: 630rpx !important;
	height: 500rpx;
	margin: 30rpx;
	border: 1rpx #666666 solid;
}

.placeholder_class{
	height: 77rpx;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #B3B3B3;
	line-height: 77rpx;
	border-bottom: 2rpx solid #f5f5f5;
}

.save_btn{
	width: 690rpx;
	height: 88rpx;
	margin: 100rpx auto;
	background: #15BBA2;
	border-radius: 44rpx;
	line-height: 88rpx;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
}

.popup_label{
	text-align: center;
}

.close_btn{
	width: 600rpx;
	height: 88rpx;
	margin: 30rpx auto;
	background: #15BBA2;
	border-radius: 44rpx;
	line-height: 88rpx;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
}
</style>
